@model OurWedding1.Models.Expense
@using OurWedding1

@{
    ViewBag.Title = Resources.Details;
}
@*@Html.Partial("ExpensesHeading")
<h2>@ViewBag.Title</h2>*@

<ul id="carousel" class="elastislide-list">


    @foreach (var item in Model.ExpensePhotos)
    {
        <li>
            <a href="http://res.cloudinary.com/hdq73umpz/image/upload/w_640,h_480,c_limit/@item.GenerateImageFileName()" rel="lightbox[elast]">
                <img src="http://res.cloudinary.com/hdq73umpz/image/upload/c_thumb,h_100,w_100,r_1/@item.GenerateImageFileName()" alt=""/>
            </a>
        </li>
    }
    
    

</ul>

<div style="display: block">
    <div id="leftColumn">
        <div class="ui-widget-content ui-corner-all uiframe">
            <h3 class="ui-widget-header ui-corner-all uiframeh3">Info </h3>
            <div class="margintop">
                <div id="detailsDiv">
                    <div class="loaderAjax"></div>
                </div>
            </div>
        </div>

        <div id="toolbar" class="ui-widget-header ui-corner-all">
            @Html.ActionLink(Resources.Back_To_List, "Index", null, new { @class = "backLink" })
            @Html.ActionLink(Resources.Edit, "Edit", new { id = Model.ExpenseId }, new { @class = "editLink" })
            @Html.ActionLink(Resources.ExpensePhotos, "Index", "ExpensePhotos", new { id = Model.ExpenseId }, new { @class = "photosButtonLink" })
        </div>


    </div>


    <div id="rightColumn">
        @*<div class="ui-widget-content ui-corner-all uiframe">
            <h3 class="ui-widget-header ui-corner-all uiframeh3">@Resources.ExpensePhotos</h3>
            <div class="margintop">
                @Html.ActionLink(Resources.ExpensePhotos_Manage, "Index", "ExpensePhotos", new { id = Model.ExpenseId }, new { @class = "photosButtonLink" })
            </div>
            <div class="margintop">
                @foreach (var item in Model.ExpensePhotos)
                {
                    <a href="http://res.cloudinary.com/hdq73umpz/image/upload/w_640,h_480,c_fill/@item.GenerateImageFileName()" class="detailsIconLink" rel="lightbox[list]">
                        <img style="border: 0" width="32" height="32" src="http://res.cloudinary.com/hdq73umpz/image/upload/c_thumb,g_faces,h_32,w_32,r_1/@item.GenerateImageFileName()" alt=""/>
                    </a>
                }
            </div>
        </div>*@

        <div class="ui-widget-content ui-corner-all uiframe">
            <h3 class="ui-widget-header ui-corner-all uiframeh3">@Resources.Installments - @Resources.Summary</h3>
            <div class="margintop">
                <div class="display-label">
                    @Html.DisplayNameFor(model => model.Progress)
                </div>
                <div class="display-field">
                    <span id="progressText"></span>
                </div>
            </div>

            <div class="margintop">
                <div id="progressbar"></div>
            </div>
        </div>

        <div class="ui-widget-content ui-corner-all uiframe">
            <h3 class="ui-widget-header ui-corner-all uiframeh3">@Resources.Installments </h3>

            <div class="margintop">
                @Html.ActionLink(Resources.Create_New, "CreateByExpense", "Installments", null, new { @class = "createIconLink" })
            </div>
            <div class="margintop">
                <div id="installments">
                    <div class="loaderAjax"></div>
                </div>
            </div>
        </div>

        <div class="ui-widget-content ui-corner-all uiframe">
            <h3 class="ui-widget-header ui-corner-all uiframeh3">@Resources.Tasks </h3>

            <div class="margintop">
                @Html.ActionLink(Resources.Create_New, "CreateByExpense", "Tasks", null, new { @class = "createIconLink" })
            </div>
            <div class="margintop">
                <div id="tasks">
                    <div class="loaderAjax"></div>
                </div>
            </div>
        </div>

        <div class="ui-widget-content ui-corner-all uiframe">
            <h3 class="ui-widget-header ui-corner-all uiframeh3">@Resources.GuestInExpenses </h3>

            <div class="margintop">
                @Html.ActionLink(Resources.Create_New, "CreateByExpense", "GuestInExpenses", null, new { @class = "createGButtonLink" })
            </div>
            <div class="margintop">
                <div id="GuestInExpenses">
                    <div class="loaderAjax"></div>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="modal"></div>
<div style="display: none">
    <div id="dialog-question">
        <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>@Resources.DeleteQuestionAjax</p>
    </div>

    <div id="dialog-ajaxStart">
        @Resources.Ajax_ProcessingData
        <img src="~/Content/images/AjaxLoader.gif" width="16" height="16" />
    </div>

    <div id="dialog-Success">
        @Resources.Ajax_Success
    </div>

    <div id="dialog-Fail">
        @Resources.Ajax_Fail
    </div>

    <div id="dialog-confirm" title="@Resources.Delete">
    </div>
</div>


@section Scripts{
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryglob")
    @Scripts.Render("~/bundles/functions")
    @Scripts.Render("~/bundles/lightbox")
    @Scripts.Render("~/bundles/elastlide")

    @* ReSharper disable UnusedParameter *@
    <script type="text/javascript">

        $(function () {
            $('#carousel').elastislide();
            //$('#carousel').elastislide({
            //    imageW: 100,
            //    onClick: null
            //});
            $("#progressbar").progressbar({
                value: false
            });
            $(".editLink").button({
                icons: {
                    primary: "ui-icon-pencil"
                }
            });
            $(".backLink").button({
                icons: {
                    primary: "ui-icon-triangle-1-w"
                }
            });
            $(".createIconLink").button({
                icons: {
                    primary: "ui-icon-plus"

                }//,
                //text: false
            });
            $(".createGButtonLink").button({
                icons: {
                    primary: "ui-icon-plus"

                }//,
                //text: false
            });
            //photosButtonLink
            $(".photosButtonLink").button({
                icons: {
                    primary: "ui-icon-image"

                }//,
                //text: false
            });
            loadDetails();
            loadInstallment();
            loadProgress();
            loadTasks();
            loadDiscounts();
            initDialogs();
            globalizationInit();

        });

        function initDialogs() {
            $('.createIconLink').click(function () {
                $.ajax({
                    url: this.href,
                    type: 'GET',
                    //cache: false,
                    data: { id: "@Model.ExpenseId" },
                    success: function (result) {
                        $('#modal').html(result).dialog('open');
                    }
                });
                return false;
            });

            $('.createGButtonLink').click(function () {
                $.ajax({
                    url: this.href,
                    type: 'GET',
                    //cache: false,
                    data: { id: "@Model.ExpenseId" },
                    success: function (result) {
                        $('#modal').html(result).dialog('open');
                        sliderInit();
                    }
                });
                return false;
            });

            $('#modal').dialog({
                autoOpen: false,
                width: 300,
                modal: true
            });
        }

        function editDialogInit() {
            $('.editIconLink').click(function () {
                $.ajax({
                    url: this.href,
                    type: 'GET',
                    //cache: false,
                    //data: { id: "@Model.ExpenseId" },
                    success: function (result) {
                        $('#modal').html(result).dialog('open');
                    }
                });
                return false;
            });
        }

        function editDisIconLinkInit(divContainer) {
            $(divContainer + " .editDIconLink").button({
                icons: {
                    primary: "ui-icon-pencil"
                },
                text: false
            }).click(function () {
                $.ajax({
                    url: this.href,
                    type: 'GET',
                    cache: false,
                    success: function (result) {
                        $('#modal').html(result).dialog('open');
                        sliderInit();
                    }
                });
                return false;
            });
        }


        function deleteDialogInit(divContainer, dataType) {
            $(divContainer + ' .deleteIconLink').click(function () {
                var url = this.href;
                $('#dialog-confirm').html($('#dialog-question').html());
                var dialog = $("#dialog-confirm").dialog({
                    resizable: false,
                    width: 300,
                    modal: true,
                    buttons: {
                        "@Resources.Delete": function () {
                            $('#dialog-confirm').html($('#dialog-ajaxStart').html());
                            dialog.dialog("option", "buttons", {});
                            $.ajax({
                                url: url,
                                type: 'POST',
                                cache: false,
                                success: function (result) {
                                    if (dataType == 0) {
                                        loadInstallment();
                                        loadProgress();
                                    }
                                    if (dataType == 1) {
                                        loadTasks();
                                    }
                                    if (dataType == 2) {
                                        loadDiscounts();
                                    }
                                    dialog.dialog("close");
                                }
                            });

                        },
                        Cancel: function () {
                            $(this).dialog("close");
                        }
                    }
                });
                return false;
            });
            }



            function loadProgress() {
                $('#progressText').html("obliczam...");
                $("#progressbar").progressbar("option", "value", false);
                $.ajax({
                    url: "@Url.Action("GetProgress", "Expenses")",
                    type: 'GET',
                    cache: false,
                    data: { id: "@Model.ExpenseId" },
                    success: function (result) {
                        $("#progressbar").progressbar("option", "value", result.value);
                        $('#progressText').html(result.value + "%");
                    }
                });
            }


            function loadInstallment() {
                $('#installments').html('<div class="loaderAjax"></div>');
                $.ajax({
                    url: "@Url.Action("IndexByExpense", "Installments")",
                    type: 'GET',
                    cache: false,
                    data: { id: "@Model.ExpenseId" },
                    success: function (result) {
                        $('#installments').html(result).show();
                        formatTable('#installmentList');
                        editDeleteIconLinkInit('#installments');
                        editDialogInit();
                        deleteDialogInit('#installments', 0);
                    }
                });
            }

            function loadTasks() {
                $('#tasks').html('<div class="loaderAjax"></div>');
                $.ajax({
                    url: "@Url.Action("IndexByExpense", "Tasks")",
                type: 'GET',
                cache: false,
                data: { id: "@Model.ExpenseId" },
                success: function (result) {
                    $('#tasks').html(result).show();
                    formatTable('#taskList');
                    editDeleteIconLinkInit('#tasks');
                    editDialogInit();
                    deleteDialogInit('#tasks', 1);
                }
            });
        }

        function loadDiscounts() {
            $('#GuestInExpenses').html('<div class="loaderAjax"></div>');
            $.ajax({
                url: "@Url.Action("IndexByExpense", "GuestInExpenses")",
                type: 'GET',
                cache: false,
                data: { id: "@Model.ExpenseId" },
                success: function (result) {
                    $('#GuestInExpenses').html(result).show();
                    formatTable('#discountList');
                    editDeleteIconLinkInit('#GuestInExpenses');
                    editDisIconLinkInit('#GuestInExpenses');
                    editDialogInit();
                    deleteDialogInit('#GuestInExpenses', 2);
                }
            });
        }

        function loadDetails() {
            $('#detailsDiv').html('<div class="loaderAjax"></div>');
            $.ajax({
                url: "@Url.Action("DetailsAjax", "Expenses")",
                type: 'GET',
                cache: false,
                data: { id: "@Model.ExpenseId" },
                success: function (result) {
                    $('#detailsDiv').hide();
                    $('#detailsDiv').html(result).show();
                }
            });
        }

        function sliderInit() {
            var inputValue = Globalize.parseFloat($("#Discount").val(), 10, "pl-PL") * 100;
            $("#amountPr").html(inputValue + "%");
            $("#slider").slider({
                value: inputValue,
                min: 0,
                max: 100,
                step: 10,
                slide: function (event, ui) {
                    $("#Discount").val(Globalize.format(ui.value / 100, "n2", "pl-PL"));
                    $("#amountPr").html(ui.value + "%");
                }
            });


        }

        function handleModalSubmit(result) {
            if (result.value) {
                // JSON returned => validation succeeded => 
                // close the modal and update some property on the main form
                $('#modal').dialog('close');
                //$('#otherProperty').val(result.value);
                loadInstallment();
                loadProgress();
            } else {
                // validation failed => refresh the modal to display the errors
                $('#modal').html(result);
            }
        }

        function handleModalSubmitTasks(result) {
            if (result.value) {
                // JSON returned => validation succeeded => 
                // close the modal and update some property on the main form
                $('#modal').dialog('close');
                //$('#otherProperty').val(result.value);
                loadTasks();
            } else {
                // validation failed => refresh the modal to display the errors
                $('#modal').html(result);
            }
        }

        function handleModalSubmit3(result) {
            if (result.value) {
                // JSON returned => validation succeeded => 
                // close the modal and update some property on the main form
                $('#modal').dialog('close');
                //$('#otherProperty').val(result.value);
                loadDiscounts();
                loadDetails();
            } else {
                // validation failed => refresh the modal to display the errors
                $('#modal').html(result);
                sliderInit();
            }
        }
    </script>
    @* ReSharper restore UnusedParameter *@
}




